<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>订单详情</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100">
    <div class="min-h-screen">
        <header class="bg-white shadow">
            <div class="max-w-7xl mx-auto py-6 px-4">
                <div class="flex justify-between items-center">
                    <h1 class="text-2xl font-bold text-gray-900">订单详情</h1>
                    <div class="flex space-x-4">
                        <button class="bg-blue-600 text-white px-4 py-2 rounded-md">导出订单</button>
                    </div>
                </div>
            </div>
        </header>

        <main class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
            <div class="bg-white shadow rounded-lg p-6 space-y-6">
                <!-- 订单状态 -->
                <div class="border-b pb-6">
                    <div class="flex items-center justify-between">
                        <div>
                            <div class="text-lg font-bold text-gray-900">订单号：2024010100001</div>
                            <div class="text-sm text-gray-500 mt-1">下单时间：2024-01-01 12:00:00</div>
                        </div>
                        <div class="text-xl font-bold text-green-600">已确认</div>
                    </div>
                </div>

                <!-- 用户信息 -->
                <div class="border-b pb-6">
                    <h2 class="text-lg font-bold mb-4">用户信息</h2>
                    <div class="grid grid-cols-2 gap-6">
                        <div>
                            <div class="text-sm text-gray-500">用户昵称</div>
                            <div class="text-gray-900 mt-1">张三</div>
                        </div>
                        <div>
                            <div class="text-sm text-gray-500">手机号码</div>
                            <div class="text-gray-900 mt-1">13800138000</div>
                        </div>
                    </div>
                </div>

                <!-- 攻略信息 -->
                <div class="border-b pb-6">
                    <h2 class="text-lg font-bold mb-4">攻略信息</h2>
                    <div class="flex items-start space-x-4">
                        <div class="w-24 h-24 bg-gray-200 rounded-lg flex-shrink-0"></div>
                        <div class="flex-1">
                            <div class="text-lg font-medium text-gray-900">示例攻略标题</div>
                            <div class="text-sm text-gray-500 mt-1">分类：自然风光</div>
                            <div class="text-sm text-gray-500 mt-1">地区：北京</div>
                            <div class="mt-2">
                                <span class="text-xl font-bold text-red-600">¥99.00</span>
                                <span class="text-sm text-gray-500 line-through ml-2">¥199.00</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 支付信息 -->
                <div class="border-b pb-6">
                    <h2 class="text-lg font-bold mb-4">支付信息</h2>
                    <div class="space-y-3">
                        <div class="flex justify-between">
                            <span class="text-gray-500">支付方式</span>
                            <span class="text-gray-900">微信支付</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-500">支付时间</span>
                            <span class="text-gray-900">2024-01-01 12:01:00</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-500">支付金额</span>
                            <span class="text-gray-900">¥99.00</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-500">交易单号</span>
                            <span class="text-gray-900">4200000000000000000000000000</span>
                        </div>
                    </div>
                </div>

                <!-- 分销信息 -->
                <div class="border-b pb-6">
                    <h2 class="text-lg font-bold mb-4">分销信息</h2>
                    <div class="space-y-3">
                        <div class="flex justify-between">
                            <span class="text-gray-500">分销员</span>
                            <span class="text-gray-900">李四（13900139000）</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-500">分销等级</span>
                            <span class="text-gray-900">高级分销员</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-500">佣金比例</span>
                            <span class="text-gray-900">30%</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-500">预计佣金</span>
                            <span class="text-red-600 font-bold">¥29.70</span>
                        </div>
                    </div>
                </div>

                <!-- 操作记录 -->
                <div>
                    <h2 class="text-lg font-bold mb-4">操作记录</h2>
                    <div class="space-y-4">
                        <div class="flex items-start space-x-4">
                            <div class="w-2 h-2 bg-blue-600 rounded-full mt-2"></div>
                            <div>
                                <div class="text-gray-900">订单创建</div>
                                <div class="text-sm text-gray-500">2024-01-01 12:00:00</div>
                            </div>
                        </div>
                        <div class="flex items-start space-x-4">
                            <div class="w-2 h-2 bg-blue-600 rounded-full mt-2"></div>
                            <div>
                                <div class="text-gray-900">支付完成</div>
                                <div class="text-sm text-gray-500">2024-01-01 12:01:00</div>
                            </div>
                        </div>
                        <div class="flex items-start space-x-4">
                            <div class="w-2 h-2 bg-blue-600 rounded-full mt-2"></div>
                            <div>
                                <div class="text-gray-900">订单确认</div>
                                <div class="text-sm text-gray-500">2024-01-01 12:05:00</div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 操作按钮 -->
                <div class="flex justify-center space-x-4 pt-6">
                    <button class="px-6 py-2 border border-red-600 text-red-600 rounded-md">取消订单</button>
                    <button class="px-6 py-2 bg-blue-600 text-white rounded-md">确认订单</button>
                </div>
            </div>
        </main>
    </div>
</body>
</html>